<template>
  <div class="entry-edit">
    <!--S直接链接-->
    <Card :dis-hover="true">
      <p slot="title"> <Icon type="ios-link" :size="16" />直接链接</p>
      <CellGroup>
        <Cell title="入口名称" :extra="link.title" />
        <Cell title="链接" :extra="link.url" />
        <Cell title="二维码" />
        <img class="qrcode" :src="link.qrcode" />
      </CellGroup>
    </Card>
    <!--E直接链接-->

    <!--S关键词回复-->
    <Card :dis-hover="true" style="margin-top: 10px">
      <p slot="title"> <Icon type="ios-link" :size="16" />公众号触发关键词</p>
      <Form ref="formData" :model="formData" :rules="ruleFormData">
        <FormItem label="关键词" prop="keyword">
          <Input type="text" v-model="formData.keyword" placeholder="关键词"></Input>
        </FormItem>
        <FormItem label="封面" prop="thumb">
          <ImageInput v-model="formData.thumb" @remove="formData.thumb = ''"></ImageInput>
        </FormItem>
        <FormItem label="描述" prop="description">
          <Input type="textarea" v-model="formData.description" :autosize="{minRows: 2,maxRows: 5}" placeholder="描述"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="submit('formData')">确认</Button>
        </FormItem>
      </Form>
    </Card>
    <!--E关键词回复-->
  </div>
</template>

<script>
import ImageInput from '@/components/image-input/image-input.vue'
export default {
  name: 'entry-edit',
  data () {
    return {
      id: '', // 入口标识
      // 链接信息
      link: {
        title: '',
        url: '',
        qrcode: ''
      },
      // 关键词规则
      formData: {
        keyword: '',
        thumb: '',
        description: ''
      },
      source_keyword: '', // 原关键词
      // 表单验证
      ruleFormData: {
        keyword: [
          { required: true, message: '关键字不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    ImageInput
  },
  created () {
    let { id } = this.$route.params
    this.id = id
  },
  mounted () {
    this.getLink()
    this.getKeyword()
  },
  methods: {
    // Run
    /**
     * 获取链接详情
     */
    getLink () {
      this.$get('enter/getLink', {
        _do: this.id
      })
        .then((res) => {
          if (res.data.code === 0) {
            this.link = res.data.data
          }
        })
    },
    /**
     * 获取关键词回复规则
     */
    getKeyword () {
      this.$get('enter/getKeyword', {
        _do: this.id
      })
        .then((res) => {
          if (res.data.code === 0) {
            this.formData = res.data.data
            this.source_keyword = res.data.data.keyword
          }
        })
    },

    // 关键词设置提交
    submit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$post('enter/setKeyword', {
            _do: this.id,
            data: this.formData,
            name: this.link.title,
            source_keyword: this.source_keyword
          })
            .then((res) => {
              if (res.data.code === 0) {
                this.source_keyword = this.formData.keyword
                this.$Message.success('修改成功')
              } else {
                this.$Message.error('修改失败')
              }
            })
        }
      })
    }
  }
}
</script>

<style scoped lang="less" src="./edit.less"></style>
